@import "./color";
// 引入主题颜色
@import "./utils";

// 去除标签默认样式
body,
html {
    padding: 0;
    margin: 0;
    color: $body-color;
    width: 100%;
    font:
        pxtovw(16, $unit) "Arial",
        "Microsoft YaHei",
        "Microsoft YaHei UI",
        "黑体",
        "宋体",
        sans-serif;
}
ul,
li,
dl,
dd {
    list-style: none;
    padding: 0;
    margin: 0;
}
h1,
h2,
h3,
h4 {
    margin: 0;
    padding: 0;
}
p {
    margin: 0;
}
a {
    text-decoration: none;
}
i {
    font-style: normal;
}
//清楚边距
$direction: ("top", "right", "bottom", "left");
@each $key in $direction {
    @for $i from 2 to 10 {
        .clear-m-#{$key}-#{$i} > :nth-child(#{$i}n) {
            margin-#{$key}: 0;
        }
        .clear-p-#{$key}-#{$i} > :nth-child(#{$i}n) {
            padding-#{$key}: 0;
        }
    }
    .clear-m-even-#{$key} > :nth-child(even) {
        margin-#{$key}: 0;
    }
    .clear-m-odd-#{$key} > :nth-child(odd) {
        margin-#{$key}: 0;
    }
    .clear-p-even-#{$key} > :nth-child(even) {
        padding-#{$key}: 0;
    }
    .clear-p-odd-#{$key} > :nth-child(odd) {
        padding-#{$key}: 0;
    }
    .clear-m-last-#{$key} > :last-child {
        margin-#{$key}: 0;
    }
}

// 边距
@for $i from 0 to 100 {
    .m-#{$i} {
        margin: pxtovw($i, $unit);
    }
    .m-t-#{$i} {
        margin-top: pxtovw($i, $unit);
    }
    .m-r-#{$i} {
        margin-right: pxtovw($i, $unit);
    }
    .m-b-#{$i} {
        margin-bottom: pxtovw($i, $unit);
    }
    .m-l-#{$i} {
        margin-left: pxtovw($i, $unit);
    }
    .m-lr-#{$i} {
        margin-left: pxtovw($i, $unit);
        margin-right: pxtovw($i, $unit);
    }
    .m-tb-#{$i} {
        margin-bottom: pxtovw($i, $unit);
        margin-top: pxtovw($i, $unit);
    }
    // 填充
    .p-#{$i} {
        padding: pxtovw($i, $unit);
    }
    .p-t-#{$i} {
        padding-top: pxtovw($i, $unit);
    }
    .p-r-#{$i} {
        padding-right: pxtovw($i, $unit);
    }
    .p-b-#{$i} {
        padding-bottom: pxtovw($i, $unit);
    }
    .p-l-#{$i} {
        padding-left: pxtovw($i, $unit);
    }
    .p-lr-#{$i} {
        padding-left: pxtovw($i, $unit);
        padding-right: pxtovw($i, $unit);
    }
    .p-tb-#{$i} {
        padding-top: pxtovw($i, $unit);
        padding-bottom: pxtovw($i, $unit);
    }
}
//循环添加自定义外边距
@if length($margin-list) >0 {
    @each $count in $margin-list {
        @if $count>100 {
            .m-#{$count} {
                margin: pxtovw($count, $unit);
            }
            .m-t-#{$count} {
                margin-top: pxtovw($count, $unit);
            }
            .m-r-#{$count} {
                margin-right: pxtovw($count, $unit);
            }
            .m-b-#{$count} {
                margin-bottom: pxtovw($count, $unit);
            }
            .m-l-#{$count} {
                margin-left: pxtovw($count, $unit);
            }
            .m-lr-#{$count} {
                margin-left: pxtovw($count, $unit);
                margin-right: pxtovw($count, $unit);
            }
            .m-tb-#{$count} {
                margin-bottom: pxtovw($count, $unit);
                margin-top: pxtovw($count, $unit);
            }
        }
    }
}
//循环添加自定义外内边距
@if length($padding-list) >0 {
    @each $count in $padding-list {
        @if $count>100 {
            .p-#{$count} {
                padding: pxtovw($count, $unit);
            }
            .p-t-#{$count} {
                padding-top: pxtovw($count, $unit);
            }
            .p-r-#{$count} {
                padding-right: pxtovw($count, $unit);
            }
            .p-b-#{$count} {
                padding-bottom: pxtovw($count, $unit);
            }
            .p-l-#{$count} {
                padding-left: pxtovw($count, $unit);
            }
            .p-lr-#{$count} {
                padding-left: pxtovw($count, $unit);
                padding-right: pxtovw($count, $unit);
            }
            .p-tb-#{$count} {
                padding-top: pxtovw($count, $unit);
                padding-bottom: pxtovw($count, $unit);
            }
        }
    }
}
// 字体
@for $i from 1 to 100 {
    .font-#{$i} {
        font-size: pxtovw($i, $unit);
    }
}
//自定义字体
@if length($font-list) >0 {
    @each $count in $font-list {
        @if $count>100 {
            .font-#{$count} {
                font-size: pxtovw($count, $unit);
            }
        }
    }
}
//首行缩进
.text-indent {
    text-indent: 2em;
}
//文本阻止换行
.text-nowrap {
    white-space: nowrap;
}
//文本加粗
.text-bold {
    font-weight: bold;
}
// 文本居中
.text-center {
    text-align: center;
}
//文本右对齐
.text-right {
    text-align: right;
}
//文本溢出省略
.text-hidden-1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@for $i from 2 to 3 {
    .text-hidden-#{$i} {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: $i;
        -webkit-box-orient: vertical;
    }
}
//自定义文本溢出隐藏
@if length($text-hidden-list) >0 {
    @each $count in $text-hidden-list {
        @if $count>3 {
            .text-hidden-#{$count} {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: $count;
                -webkit-box-orient: vertical;
            }
        }
    }
}
/* 布局 */
// 按比例分配
$per: "%";
@for $i from 1 to 13 {
    .flex-#{$i} {
        flex: $i 0 #{calc(100% / (12% / $i)) + $per};
    }
    .flex-order-#{$i} {
        order: $i;
    }
}
//flex布局排序

.flex-auto {
    flex: 1;
}
.flex {
    display: flex;
}
/* 允许换行 */
.flex-wrap {
    flex-wrap: wrap;
}
/* 垂直排列 */
.flex-column {
    flex-direction: column;
}
/* 水平排列 */
/* 左边排列 */
.align-h-left {
    justify-content: flex-start;
}
/* 右对齐 */
.align-h-right {
    justify-content: flex-end;
}
/* 剧中排列 */
.align-h-center {
    justify-content: center;
}
/* 两端排列 */
.align-h-between {
    justify-content: space-between;
}
/* 周围空间分布 */
.align-h-around {
    justify-content: space-around;
}
/* 垂直排列 */
/* 顶部对齐 */
.align-v-top {
    align-items: flex-start;
}
/* 底部对齐 */
.align-v-bottom {
    align-items: flex-end;
}
/* 剧中对齐 */
.align-v-center {
    align-items: center;
}
//边框
.border {
    border-width: 1px;
    border-style: solid;
}
.border-none {
    border: none;
}
@each $key in $direction {
    .border-#{$key} {
        border-#{$key}-width: 1px;
        border-#{$key}-style: solid;
    }
}
//边框样式
$borderStyle: ("dashed", "dotted", "double", "groove");
@each $key in $borderStyle {
    @each $dir in $direction {
        .border-#{$dir}-#{$key} {
            border-#{$dir}-style: #{$key};
        }
    }
}
//元素圆角
@for $i from 0 to 50 {
    .border-radius-#{$i} {
        border-radius: pxtovw($i, $unit);
    }
    .border-tl-radius-#{$i} {
        border-top-left-radius: pxtovw($i, $unit);
    }
    .border-tr-radius-#{$i} {
        border-top-right-radius: pxtovw($i, $unit);
    }
    .border-bl-radius-#{$i} {
        border-bottom-left-radius: pxtovw($i, $unit);
    }
    .border-br-radius-#{$i} {
        border-bottom-right-radius: pxtovw($i, $unit);
    }
}
//自定义圆角
@if length($border-radius-list) >0 {
    @each $count in $border-radius-list {
        @if $count>50 {
            .border-radius-#{$count} {
                border-radius: pxtovw($count, $unit);
            }
            .border-tl-radius-#{$count} {
                border-top-left-radius: pxtovw($count, $unit);
            }
            .border-tr-radius-#{$count} {
                border-top-right-radius: pxtovw($count, $unit);
            }
            .border-bl-radius-#{$count} {
                border-bottom-left-radius: pxtovw($count, $unit);
            }
            .border-br-radius-#{$count} {
                border-bottom-right-radius: pxtovw($count, $unit);
            }
        }
    }
}
//边框粗细
@for $i from 0 to 10 {
    .border-w-#{$i} {
        border-width: pxtovw($i, $unit);
    }
}
//自定义边框粗细
@if length($border-w-list) >0 {
    @each $count in $border-w-list {
        @if $count>10 {
            .border-w-#{$i} {
                border-width: pxtovw($i, $unit);
            }
        }
    }
}
//手型
.pointer {
    cursor: pointer;
}
//头像
.avatar {
    border-radius: 50%;
    object-fit: cover;
}
//关闭图片cover模式
.img-cover-no {
    object-fit: none;
}
//开启图片cover
.img-cover {
    object-fit: cover;
}
//禁止元素点击事件
.disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.6;
}

//盒子填充距计算在内部
.box-sizing {
    box-sizing: border-box;
}

//行高
@for $i from 1 to 30 {
    .line-h-#{$i} {
        line-height: pxtovw($i, $unit);
    }
}
//自定义行高
@if length($line-height-list) >0 {
    @each $count in $line-height-list {
        @if $count>10 {
            .line-h-#{$i} {
                line-height: pxtovw($i, $unit);
            }
        }
    }
}
.line-h-fill {
    line-height: 100%;
}
//根据内容自定义高度
.h-fit-content {
    height: fit-content;
}
//宽高
@for $i from 0 to 500 {
    .w-#{$i} {
        width: pxtovw($i, $unit);
    }
    .min-w-#{$i} {
        min-width: pxtovw($i, $unit);
    }
    .max-w-#{$i} {
        max-width: pxtovw($i, $unit);
    }
    .h-#{$i} {
        height: pxtovw($i, $unit);
    }
    .max-h-#{$i} {
        max-height: pxtovw($i, $unit);
    }
    .min-h-#{$i} {
        min-height: pxtovw($i, $unit);
    }
}
//循环添加自定义宽度
@if length($width-list) >0 {
    @each $count in $width-list {
        @if $count>500 {
            .w-#{$count} {
                width: pxtovw($count, $unit);
            }
            .min-w-#{$count} {
                min-width: pxtovw($count, $unit);
            }
            .max-w-#{$count} {
                max-width: pxtovw($count, $unit);
            }
        }
    }
}
//循环添加自定义高度
@if length($height-list) >0 {
    @each $count in $height-list {
        @if $count>500 {
            .h-#{$count} {
                height: pxtovw($count, $unit);
            }
            .max-h-#{$count} {
                max-height: pxtovw($count, $unit);
            }
            .min-h-#{$count} {
                min-height: pxtovw($count, $unit);
            }
        }
    }
}
//宽度百分比
$per: "%";
@for $i from 1 to 100 {
    .max-w-per-#{$i} {
        max-width: #{$i}+ $per;
    }
    .max-h-per-#{$i} {
        max-height: #{$i}+ $per;
    }
    .min-h-per-#{$i} {
        min-height: #{$i}+ $per;
    }
    .min-w-per-#{$i} {
        min-width: #{$i}+ $per;
    }
    .w-per-#{$i} {
        width: #{$i}+ $per;
    }
    .h-per-#{$i} {
        height: #{$i}+ $per;
    }
}
.max-w-fill {
    max-width: 100%;
}
.max-h-fill {
    max-height: 100%;
}
.w-content {
    width: fit-content;
}
.h-content {
    height: fit-content;
}
.w-fill {
    width: 100%;
}
.h-fill {
    height: 100%;
}
//定位偏移
$neg: "-";
@for $i from 0 to 200 {
    //正数偏移
    .left-#{$i} {
        left: pxtovw($i, $unit);
    }
    .right-#{$i} {
        right: pxtovw($i, $unit);
    }
    .bottom-#{$i} {
        bottom: pxtovw($i, $unit);
    }
    .top-#{$i} {
        top: pxtovw($i, $unit);
    }
    // 负数偏移
    .-left-#{$i} {
        left: pxtovw(-$i, $unit);
    }
    .-right-#{$i} {
        right: pxtovw(-$i, $unit);
    }
    .-bottom-#{$i} {
        bottom: pxtovw(-$i, $unit);
    }
    .-top-#{$i} {
        top: pxtovw(-$i, $unit);
    }
}
//自定义偏移
@if length($offset-list) >0 {
    @each $count in $offset-list {
        @if $count>200 {
            //正数偏移
            .left-#{$i} {
                left: pxtovw($i, $unit);
            }
            .right-#{$i} {
                right: pxtovw($i, $unit);
            }
            .bottom-#{$i} {
                bottom: pxtovw($i, $unit);
            }
            .top-#{$i} {
                top: pxtovw($i, $unit);
            }
            // 负数偏移
            .-left-#{$i} {
                left: pxtovw(-$i, $unit);
            }
            .-right-#{$i} {
                right: pxtovw(-$i, $unit);
            }
            .-bottom-#{$i} {
                bottom: pxtovw(-$i, $unit);
            }
            .-top-#{$i} {
                top: pxtovw(-$i, $unit);
            }
        }
    }
}
//层级关系
@for $i from 0 to 10 {
    .z-index-#{$i} {
        z-index: $i;
    }
}
//定位元素居中
// 定位
.rela {
    position: relative;
}
.abso {
    position: absolute;
}
.sticky {
    position: sticky;
}
.fixed {
    position: fixed;
}
//定位垂直居中
.abso-v-center {
    top: 50%;
    transform: translateY(-50%);
}
//定位水平居中
.abso-h-center {
    left: 50%;
    transform: translateX(-50%);
}
//定位垂直水平居中
.abso-center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
//margin水平居中
.m-auto {
    margin-left: auto;
    margin-right: auto;
}
//隐藏元素
.overflow-y-auto {
    overflow-y: auto;
}
.overflow-x-auto {
    overflow-x: auto;
}
.overflow-x-hidden {
    overflow-x: hidden;
}
.overflow-y-hidden {
    overflow-y: hidden;
}
.overflow-hidden {
    overflow: hidden;
}
//元素类型
.d-block {
    display: block;
}
.d-none {
    display: none;
}
.d-inline {
    display: inline;
}
.d-inline-block {
    display: inline-block;
}
